
/**  
*	@title: 拖拽模块
*	@description: 拖拽模块的操作函数
*	@author: dongyu007
*	@date: 19/1/20
*	@param: --
*	@return: domcfing module
*	@throws: error
*/   

layui.define(['layer','jquery'],function(exports){
	var layer = layui.layer, form = layui.form
	var wdwth = document.body.clientWidth > 1440;
	// var defaultConfig = /////{}
  	var config = {
  		defaultConfigData:[ // 默认布局
  			{id:1, x: 0, y: 0, width: 6, height: 2}, 	// 三格菜单
	        {id:2, x: 0, y: 2, width: 6, height: 5}, 	// 代办事项
	        {id:3, x: 6, y: 0, width: 6, height: 7}, 	// 考核结果

	        {id:4, x: 0, y: 7, width: 8, height: 4}, 	// 平安考核 季度考核
	        {id:5, x: 8, y: 7, width: 4, height: 4}, 	// 各减分项占比
	        {id:6, x: 0, y: 11, width: 6, height: 5},	// 当前考核情况

	        {id:7, x: 6, y: 11, width: 6, height: 5}, 	// 代签事项
	        {id:8, x: 0, y: 16, width: 6, height: 7},	// 最新考核结果排行
	        {id:9, x: 6, y: 16, width: 6, height: 7},	// 最差指标项列表
	        // dashboard3
	        {id:10, x: 0, y: 23, width: 5, height: 4},	// 8格菜单
	        {id:11, x: 0, y: 27, width: 5, height: 4},	// 待办事项
	        {id:12, x: 0, y: 31, width: 5, height: 5},	// 超期未完成
	        {id:13, x: 5, y: 23, width: 5, height: 5},	// 异常指标排名

	        {id:14, x: 5, y: 28, width: 5, height: 9},	// 考核结果
	        {id:15, x: 10, y: 31, width: 2, height: 9},	// 排名结果
  		],
  		resetSerializedData: [ // dom模板的所有位置数据（页面根据此数据进行渲染）
	  		{id:1, x: 0, y: 0, width: 6, height: 2}, 	// 三格菜单
	        {id:2, x: 0, y: 2, width: 6, height: 5}, 	// 代办事项
	        {id:3, x: 6, y: 0, width: 6, height: 7}, 	// 考核结果

	        {id:4, x: 0, y: 7, width: 8, height: 4}, 	// 平安考核 季度考核
	        {id:5, x: 8, y: 7, width: 4, height: 4}, 	// 各减分项占比
	        {id:6, x: 0, y: 11, width: 6, height: 5},	// 当前考核情况

	        {id:7, x: 6, y: 11, width: 6, height: 5}, 	// 代签事项
	        {id:8, x: 0, y: 16, width: 6, height: 7},	// 最新考核结果排行
	        {id:9, x: 6, y: 16, width: 6, height: 7},	// 最差指标项列表
	        // dashboard3
	        {id:10, x: 0, y: 23, width: 5, height: 4},	// 8格菜单
	        {id:11, x: 0, y: 27, width: 5, height: 4},	// 待办事项
	        {id:12, x: 0, y: 31, width: 5, height: 5},	// 超期未完成
	        {id:13, x: 5, y: 23, width: 5, height: 5},	// 异常指标排名

	        {id:14, x: 5, y: 28, width: 5, height: 9},	// 考核结果
	        {id:15, x: 10, y: 31, width: 2, height: 9},	// 排名结果

  		],
  		grid: '', // 拖拽对象
    	init: function(str){
      		var options = {
		        float: false, // 设置 true后 div可以随意放 不会粘合
		        disableDrag: true,
		        disableResize: true,
		        animate: true
		    };
      		$('#grid-stack').gridstack(options);
      		// this.grid.removeAll()
      		this.grid = $('#grid-stack').data('gridstack')
      		this.loadGrid()
    	},
    	loadGrid: function() {
    		/**   
			 * @description: 初始化根据数据渲染指定的模板
			 * @param: ${domid}:dom对应的id由用户选择传入
			 * @throws: error 异常错误捕捉
			 * @return: 生产widget模块
			 * GridStackUI.Utils.sort 接受三个参数
			 * @param: ${nodes} array to sort ${dir} 1 for asc, -1 for desc (optional) ${width} width of the grid. If undefined the width will be calculated automatically (optional).
			 */

			var that = this
			// $.ajax请求数据 获取数据赋值给 this.resetSerializedData
			var items = GridStackUI.Utils.sort(this.resetSerializedData);
			_.each(items,function(node,i){
				var idSelect = '#drag_'+node.id
				$('body .ui-component '+idSelect).prop('checked',true)
				form.render()// layui重新渲染
				var el = $('<div id="drag_widget_'+node.id+'"><div class="grid-stack-item-content">' + that.domSelect(node.id) + '</div></div>')
				that.grid.addWidget(el, node.x, node.y, node.width, node.height, false)
				that.echartSLoader(node.id)
			})
    	},
    	addGrid: function(domid) {
    		/**   
			 * @description: 新增widget
			 * @param: ${domid}:dom对应的id由用户选择传入
			 * @throws: error 异常错误捕捉
			 * @return: 生产widget模块
			 * GridStackUI.Utils.sort 接受三个参数
			 * @param: ${nodes} array to sort ${dir} 1 for asc, -1 for desc (optional) ${width} width of the grid. If undefined the width will be calculated automatically (optional).
			 */
			var that = this
			var items = GridStackUI.Utils.sort(this.defaultConfigData); // 获取默认配置
			var el = $('<div id="drag_widget_'+domid+'"><div class="grid-stack-item-content">' + this.domSelect(domid) + '</div></div>')
			var defaultNode
			_.each(items,function(node,i){
				if (node.id === domid) {
					defaultNode = node
					that.resetSerializedData.push(node)
				}
			})
			console.log(that.resetSerializedData)
			this.grid.addWidget(el, defaultNode.x, defaultNode.y, defaultNode.width, defaultNode.height, false)
			this.echartSLoader(domid)
			$('.grid-stack-item-content').css('background-color','rgba(255,255,255,.5)')
			this.grid.enable()
			this.grid.batchUpdate()
			this.grid.commit()
    	},
    	domSelect: function(domid) {
			/**   
			 * @description: 处理所选dom的数据 此处写ajax获取数据或写静态数据
			 * @param: ${domid}:dom对应的id由用户选择传入 
			 * @throws: error 异常错误捕捉
			 * @return: 扔出模板${str}:template模板
			*/
			// excemple
			// console.log('domid',domid)
			var str = '' // 数据填充后的template
			if (domid === 2 || domid === 11 || domid === 12) {
				var data_2 = [
					{event: '事件', time: '2019-01-05', acction: '删除'},
					{event: '事件', time: '2019-01-06', acction: '新增'}
				]
				$.each(data_2,function(i,item){
					str += '<div class="vc"><div class="column-item flex2 iconbefore">'+item.event+'</div><div class="column-item flex2">'+item.time+'</div><div class="column-item flex1">'+item.acction+'</div><div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div></div>'
				})
			}
			else if (domid === 8 || domid === 15) {
				var data_8 = [
					{name: '杭州市xxx',rank: '1'},
					{name: '绍兴市xxx',rank: '2'},
					{name: '温州市xxx',rank: '3'},
					{name: '金华市xxx',rank: '4'},
				]
				$.each(data_8,function(i,item){
					str+= '<li><span>No.'+item.rank+'</span><p>'+item.name+'</p></li>'
				})
			}
			return this.domStore(domid,str)
    	},
    	domStore: function(domid,data) {
    		/**   
			 * @description: 存储所有dom的模板 本功能可以由 template 解析， 建议写在html中
			 ${data}: 模板数据（可为空） ${}
			 * @throws: error 异常错误捕捉
			 * @return: 扔出dom
			 */
    		var htmlTemplate = {
    			tpl_1: '<div class="dashboard-top-entry ac"><a href=""><img src="static/image/zbxzck.png" alt=""><span class="notice">99+</span></a><a href=""><img src="static/image/dwzp.png" alt=""></a><a href=""><img src="static/image/zgrw.png" alt=""></a></div>',
    			tpl_2: '<div class="dashboard-todolist"><div class="todolist-title"><p>待办事项</p></div><div class="todolist-table"><div class="table-header vc"><div class="column flex2">事件</div><div class="column flex2">时间</div><div class="column flex1 ar">操作</div></div><div class="header-list">'+data+'</div></div></div>',
    			tpl_3: '<div class="grid-top-tooltip"><div class="tooltip-left"><p>最新考核结果</p><h3>85 <span>分</span></h3><p>比上一期<i class="iconfont icon-jiantouarrow499"></i> <span>15.50%</span></p></div><div class="tooltip-right"><p>本期考核排名</p><h3>05 <span>名</span></h3><p>比上一期<i class="iconfont icon-jiantouarrow505"></i> <span>2名</span></p></div></div><div class="dashboard-echarts"><div class="chart-pie-title"><p>共计18项考核内容</p></div><div class="echarts-container"><div class="echart-normal" id="echarts-render-circle"></div></div></div>',
    			tpl_4: '<div class="fit-screen"><div class="title-icon"><p>平安考核</p></div><div id="echarts-render-pa" class="echart-limit"></div></div><div class="fit-screen"><div class="title-icon"><p>季度考核</p></div><div id="echarts-render-jd" class="echart-limit"></div></div>',
    			tpl_5: '<div><div class="echart-sigle" id="echart-sigle"></div></div>',
    			tpl_6: '<div class="dashboard-grid"><div class="vc topheader"><div class="left"><h3>90.91%</h3><p>当前考核执行情况</p></div><div class="right"><div class="select dowebok"><span class="placeholder">选择年/月/日处</span><ul><li>百度</li><li>谷歌</li><li>雅虎</li><li>新浪</li></ul></div></div></div><div class="chart"><div class="title-icon"><p>共计55户单位</p></div></div><div class="echarts-render-dw" id="echarts-render-dw"></div></div>',
    			tpl_7: '<div class="chart"><div class="title-icon"><p>代签事宜</p></div><div class="todolist-table"><div class="table-header vc"><div class="column flex2">事件</div><div class="column flex2">时间</div><div class="column flex1 ar">操作</div></div><div class="header-list"><div class="vc"><div class="column-item flex2 iconbefore">1248197</div><div class="column-item flex2">2018-09-07 12:00</div><div class="column-item flex1">22:02:30</div><div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div></div><div class="vc"><div class="column-item flex2 iconbefore">1248197</div><div class="column-item flex2">2018-09-07 12:00</div><div class="column-item flex1">22:02:30</div><div class="column-item flex1 ar"><i class="iconfont icon-more"></i></div></div></div></div></div>',
    			tpl_8: '<div class="kh-list"><div class="title-icon"><p>最新考核结果排名</p></div><div class="vc"><div class="left"><div class="header-kh"><h2>前20</h2>名</div><div class="rank-list"><ul class="leftpart">'+data+'</ul><ul class="rightpart">'+data+'</ul><div class="slide ac"><i class="iconfont icon-fanhui"></i><i class="iconfont icon-gengduo active"></i></div></div></div><div class="right"><div class="header-kh"><h2>倒数20</h2>名</div><div class="rank-list"><ul class="leftpart">'+data+'</ul><ul class="rightpart">'+data+'</ul><div class="slide ac"><i class="iconfont icon-fanhui"></i><i class="iconfont icon-gengduo active"></i></div></div></div></div></div>',
    			tpl_9: '<div class="fit-screen"><div class="title-icon"><p>最差指标项列表</p></div><div class="progess-item"><ul><li class="vc"><span class="pr-w1">NO.1</span><div class="full-progess"><div class="progess-now" style="background-color: #cf4049;width: 90%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.2</span><div class="full-progess"><div class="progess-now" style="background-color: #e88d3d;width: 80%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.3</span><div class="full-progess"><div class="progess-now" style="background-color: #ddd846;width: 70%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.4</span><div class="full-progess"><div class="progess-now" style="background-color: #58e5a3;width: 60%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.5</span><div class="full-progess"><div class="progess-now" style="background-color: #b6daea;width: 50%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li></ul></div></div>',
    			tpl_10: '<div class="dashboard-screen-first"><div class="dashboard-top-entry ac"><a href=""><img src="static/image/dwzp.png" alt=""></a><a href=""><img src="static/image/rcjc.png" alt=""></a><a href=""><img src="static/image/khpf.png" alt=""></a><a href=""><img src="static/image/khsh.png" alt=""></a></div><div class="dashboard-top-entry ac"><a href=""><img src="static/image/zgqk.png" alt=""></a><a href=""><img src="static/image/khhz.png" alt=""></a><a href=""><img src="static/image/dwgl.png" alt=""></a><a href=""><img src="static/image/khsz.png" alt=""></a></div></div>',
    			tpl_11: '<div class="dashboard-todolist"><div class="todolist-title"><p>待办事项</p></div><div class="todolist-table"><div class="table-header vc"><div class="column flex2">事件</div><div class="column flex2">时间</div><div class="column flex1 ar">操作</div></div><div class="header-list">'+data+'</div></div></div>',
    			tpl_12: '<div class="dashboard-todolist"><div class="todolist-title"><p>超期未完成</p></div><div class="todolist-table"><div class="table-header vc"><div class="column flex2">事件</div><div class="column flex2">时间</div><div class="column flex1 ar">操作</div></div><div class="header-list">'+data+'</div></div></div>',
    			tpl_13: '<div class="title-icon"><p>异常指标排名</p></div><div class="progess-item"><ul><li class="vc"><span class="pr-w1">NO.1</span><div class="full-progess"><div class="progess-now" style="background-color: #cf4049;width: 90%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.2</span><div class="full-progess"><div class="progess-now" style="background-color: #e88d3d;width: 80%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.3</span><div class="full-progess"><div class="progess-now" style="background-color: #ddd846;width: 70%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.4</span><div class="full-progess"><div class="progess-now" style="background-color: #58e5a3;width: 60%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li><li class="vc"><span class="pr-w1">NO.5</span><div class="full-progess"><div class="progess-now" style="background-color: #b6daea;width: 50%;"></div></div><span class="pr-w3">占比20% 指标描述</span></li></ul></div>',
    			tpl_14: '<div class="title-icon"><p>考核结果同比</p></div><div id="echarts-render-khrs" class="echart-limit" style="margin-bottom:40px;"></div><div class="title-icon"><p>考核结果同比</p></div><div id="echarts-render-khrs2" class="echart-limit"></div><div class="font-intro"><p>环比增长速度 = （本期数 - 上期数）/ 上期数x100%，反映本期比上期增长多少</p><p>环比发展速度 = 本期数 / 上期数x100%，是报告期水平与前一期之比，反映现象在前后期的发展变化情况</p></div>',
    			tpl_15: '<div class="title-icon"><p>得分最后20名</p></div><div class="rank-list"><ul>'+data+'</ul></div>'
    		};
    		var tplid = 'tpl_' + domid

    		return htmlTemplate[tplid]
    	},
    	domRemove: function(domid){
    		/**   
			 * @description: 移除页面中的模块
			 * @param: ${domid}: dom对应的id
			 * @throws: error 异常错误捕捉
			 * @return: new tpl
			 */

			// console.log('remove',domid)
			var that = this
			var newSerializedData = []
			$.each(that.resetSerializedData,function(i,item){
				if (item.id !== domid) {
					newSerializedData.push(item)
				}
			})
			that.resetSerializedData = newSerializedData
			var id = '#drag_widget_' + domid // 删除对应widget
			this.grid.removeWidget($(id))
			// $(id).remove()

			// 删除后需要保存that.resetSerializedData 中的数据
    	},
    	serializedData:function(domid,x,y,w,h) {
    		/**   
			 * @description: 实时保存被移动的dom的位置信息，传至后端保存数据
			 * @param: ${domid}: dom对应的id ${x}: x轴坐标 ${y}: y轴坐标 ${w}: 宽度 ${h}: 高度	// (宽度使用12格栅格布局，1代表一格)
			 * @throws: error 异常错误捕捉
			 * @return: new save position
			 */
			var itemData = $('.grid-stack-item')
			var saveArr = []
			_.each(itemData,function(node,index){
				console.log(node,index)
				var storeData = {
					id: +node.getAttribute('id').replace('drag_widget_',''),
					x: +node.getAttribute('data-gs-x'),
					y: +node.getAttribute('data-gs-y'),
					width: +node.getAttribute('data-gs-width'),
					height: +node.getAttribute('data-gs-height')
				}
				console.log(storeData)
				saveArr.push(storeData)

			})
			this.resetSerializedData = saveArr
			console.log(this.resetSerializedData)
    	},
    	disableGrid() {
    		this.grid.disable() // 禁用拖拽
    		$('.grid-stack-item-content').css('background-color','rgba(0,0,0,0)')
    	},
    	enableGrid(){
			this.grid.enable()// 启动拖拽
			$('.grid-stack-item-content').css('background-color','rgba(255,255,255,.5)')
    	},
    	echartSLoader(domid) {
    		/**   
			 * @description: echarts 图表初始化函数
			 * @param: ${domid}: dom对应的id
			 * @throws: error 异常错误捕捉
			 * @return: echarts.init
			 */
    		var that = this
    		// console.log('domid ',domid)
    		// console.log('ty domid ',typeof domid)
			
    		if (domid=== 3) {
    			var pieSource = {'a': 335,'b': 335,'c': 335,'d': 335,'e': 335,'f': 335,'g': 335,'h': 335,}
				var source = that.initData(pieSource);
    			var option = {
				    tooltip: {
				        trigger: 'item',
				        textStyle: {
				            color: '#fff',
				        },
				        formatter: "{b} : {c} ({d}%)"
				    },
				    color: ["#3471fd", "#6babff", "#aee1ff", "#fca98f", "#5598ff", "#4a53ff", "#fe6e52", "#5fc6fc"],// 每个框的颜色,
				    title: {
				        text:' 12项',
				        subtext:'各加分项占比',
				        left: '14%',
				        top:'40%',
				        textStyle:{
				            color:'#fff',
				            fontSize:25,
				            align:'center',
				            width: 50
				        },
				        subtextStyle: {
				        	align: 'center'
				        }
				    },
				    legend: [{
				            orient: 'vertical',
				            left: 300,
				            y: 'center',
				            icon: 'rect',
				            textStyle: {
				                color: '#cddafd',
				                fontSize: 14,
				                // rich: richStyle,
				                width: 120,
				                height: 20,
				                padding: [5,0,0,0],
				                borderRadius: 3
				            },
				            padding: [30, 0],
				            itemWidth: 15,
				            itemHeight: 15,
				            itemGap: 20,
				            data: source.legendData.slice(0, 4),
				            formatter: function(name) {
				                var oa = option.series[0].data;
				                var total = 0;
				                oa.forEach((item, index) => {
				                    total += item.value;
				                });
				                for (var i = 0; i < oa.length; i++) {
				                    if (name == oa[i].name) {
				                        var left =  '占'+(oa[i].value / total * 100).toFixed(2) + '%'
				                        return left+'   查看';
				                    }
				                }
				            },
				        },
				        {
				            orient: 'vertical',
				            left: 470,
				            y: 'center',
				            icon: 'rect',
				            textStyle: {
				                color: '#cddafd',
				                fontSize: 14,
				                // rich: richStyle,
				                width: 120,
				                height: 20,
				                padding: [5,0,0,0],
				                borderRadius: 3
				            },
				            padding: [30, 0, 30, 0],
				            itemWidth: 15,
				            itemHeight: 15,
				            itemGap: 20,
				            data: source.legendData.slice(4),
				            formatter: function(name) {
				                var oa = option.series[0].data;
				                var total = 0;
				                oa.forEach((item, index) => {
				                    total += item.value;
				                });
				                for (var i = 0; i < oa.length; i++) {
				                    if (name == oa[i].name) {
				                        // return name + '  ' + '{style' + i + '|' + (oa[i].value / total * 100).toFixed(2) + '%}';
				                        var left =  '占'+(oa[i].value / total * 100).toFixed(2) + '%'
				                        return left+'   查看';

				                    }
				                }
				            },
				        }
				    ],
				    series: [{
				        type: 'pie',
				        radius: ['50%', '80%'],
				        center: ['20%', '50%'],
				        data: source.source,
				        hoverAnimation: false,
				        itemStyle: {
				            normal: {
				                label: {
				                    show: false
				                },
				                borderColor: 'rgba(0,0,0,0)',
				            	borderWidth: 5
				            },
				            
				        }
				    }]
				};
    			var myChart = echarts.init($('body #echarts-render-circle')[0]); // 右上
    			myChart.setOption(option);
			    myChart.on('legendselectchanged', function (params) { // 点击图标的查看事件
				    console.log(params.name);// 打印出对应的name
				});

    		}else if(domid === 4) {
    			var option1 = {
				    tooltip: {},
				    grid: {
				        top: '8%',
				        left: '1%',
				        right: '1%',
				        bottom: '8%',
				        containLabel: true,
				    },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: true,
				        axisLine: { //坐标轴轴线相关设置。数学上的x轴
				            show: false,
				        },
				        axisLabel: { //坐标轴刻度标签的相关设置
				            textStyle: {
				                color: '#d1e6eb',
				                margin: 10,
				            },
				        },
				        axisTick: {
				            show: false,
				        },
				        data: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ]
				        // \n 换行
				        // 需要指定第几个字符换行激活次选项 同时删除data内的\n
				        // formatter: function(value) {
				         //        var ret = ""; //拼接加\n返回的类目项
				         //        var maxLength = 5; //每项显示文字个数
				         //        var valLength = value.length; //X轴类目项的文字个数
				         //        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
				         //        if (rowN > 1) //如果类目项的文字大于5,
				         //        {
				         //            for (var i = 0; i < rowN; i++) {
				         //                var temp = ""; //每次截取的字符串
				         //                var start = i * maxLength; //开始截取的位置
				         //                var end = start + maxLength; //结束截取的位置
				         //                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响
				         //                temp = value.substring(start, end) + "\n";
				         //                ret += temp; //凭借最终的字符串
				         //            }
				         //            return ret;
				         //        } else {
				         //            return value;
				         //        }
				         //    },
				    }],
				    yAxis: [{
				        type: 'value',
				        min: 0,
				        // max: 140,
				        // splitNumber: 10,
				        splitLine: {
				            show: true,
				            lineStyle: {
				                color: '#343434',
				                type: 'dashed',
				                width: 1.5
				            }
				        },
				        axisLine: {
				            show: false,
				        },
				        axisLabel: {
				            margin: 20,
				            textStyle: {
				                color: '#d1e6eb',

				            },
				        },
				        axisTick: {
				            show: false,
				        },
				    }],
				    series: [{
				        type: 'line',
				        // smooth: true, //是否平滑曲线显示
						symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
				        showAllSymbol: true,
				        // symbol: 'emptyCircle',
				        symbolSize: 9,
				        lineStyle: {
				            normal: {
				                color: "#3aa1ff", // 线条颜色
				            },
				        },
				        itemStyle: {
				            normal: {
				                color: "#3aa1ff",
				            }
				        },
				        data: [393, 438, 485, 631, 689, 824, 587, 312]
				    }, {
				        type: 'bar',
				        barWidth: 20,
				        label: {
				            show: false
				        },
				        itemStyle: {
				        	emphasis: {
				        		label: {
				        			// show: false
				        		}
				        	},
				            normal: {
				            	color: '#26D968'
				                // barBorderRadius: 5,
				                // color: new echarts.graphic.LinearGradient(
				                //     0, 0, 0, 1,
				                //     [{
				                //             offset: 0,
				                //             color: '#14c8d4'
				                //         },
				                //         {
				                //             offset: 1,
				                //             color: '#43eec6'
				                //         }
				                //     ]
				                // )
				                // color: function(params) {
				                //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
				                //     return colorList[params.dataIndex];
				                // }
				            }
				        },
				        data: [200, 382, 102, 267, 186, 315, 316, 124]
				    }]
				};
				var option2 = {
				    tooltip: {},
				    grid: {
				        top: '8%',
				        left: '1%',
				        right: '1%',
				        bottom: '8%',
				        containLabel: true,
				    },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: true,
				        axisLine: { //坐标轴轴线相关设置。数学上的x轴
				            show: false,
				        },
				        axisLabel: { //坐标轴刻度标签的相关设置
				            textStyle: {
				                color: '#d1e6eb',
				                margin: 10,
				            },
				        },
				        axisTick: {
				            show: false,
				        },
				        data: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ]
				    }],
				    yAxis: [{
				        type: 'value',
				        min: 0,
				        // max: 140,
				        // splitNumber: 10,
				        splitLine: {
				            show: true,
				            lineStyle: {
				                color: '#343434',
				                type: 'dashed',
				                width: 1.5
				            }
				        },
				        axisLine: {
				            show: false,
				        },
				        axisLabel: {
				            margin: 20,
				            textStyle: {
				                color: '#d1e6eb',

				            },
				        },
				        axisTick: {
				            show: false,
				        },
				    }],
				    series: [{
				        type: 'line',
				        // smooth: true, //是否平滑曲线显示
						symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
				        showAllSymbol: true,
				        // symbol: 'emptyCircle',
				        symbolSize: 9,
				        lineStyle: {
				            normal: {
				                color: "#3aa1ff", // 线条颜色
				            },
				        },
				        itemStyle: {
				            normal: {
				                color: "#3aa1ff",
				            }
				        },
				        tooltip: {
				        },
				        data: [393, 438, 485, 631, 689, 824, 587]
				    }, {
				        type: 'bar',
				        barWidth: 20,
				        tooltip: {
				            show: true
				        },
				        label: {
				            show: false
				        },
				        itemStyle: {
				        	emphasis: {
				        		label: {
				        			// show: false
				        		}
				        	},
				            normal: {
				            	color: '#26D968'
				                // barBorderRadius: 5,
				                // color: new echarts.graphic.LinearGradient(
				                //     0, 0, 0, 1,
				                //     [{
				                //             offset: 0,
				                //             color: '#14c8d4'
				                //         },
				                //         {
				                //             offset: 1,
				                //             color: '#43eec6'
				                //         }
				                //     ]
				                // )
				                // color: function(params) {
				                //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
				                //     return colorList[params.dataIndex];
				                // }
				            }
				        },
				        data: [200, 382, 102, 267, 186, 315, 316]
				    }]
				};
				var myChartPa = echarts.init($('body #echarts-render-pa')[0]);// 左下
  				var myChartJd = echarts.init($('body #echarts-render-jd')[0]);// 左中

				myChartPa.setOption(option1);
				myChartJd.setOption(option2);

    		}else if(domid === 5) {
    			var that = this
    			var pieSource1 = { // 数据格式
			        'a': 335,
			        'b': 335,
			        'c': 335,
			        'd': 335,
			        'e': 335,
			        'f': 335,
			    },

				source1 = that.initData(pieSource1);
				var option3 = {
				    tooltip: {
				        trigger: 'item',
				        textStyle: {
				            color: '#fff',
				        },
				        formatter: "{b} : {c} ({d}%)"
				    },
				    color: ["#3471fd", "#6babff", "#aee1ff", "#fca98f", "#5598ff", "#4a53ff"],
				    title: {
				        text:'  6项',
				        subtext:'各减分项占比',
				        left: !wdwth ? '11%' : '16%',
				        top:'37%',
				        textStyle:{
				            color:'#fff',
				            fontSize: 22,
				            align:'center',
				        },
				        subtextStyle: {
				        	align: 'center'
				        }
				    },
				    legend: [{
				            orient: 'vertical',
				            left: !wdwth ? 180 : 280,
				            y: 'center',
				            icon: 'rect',
				            textStyle: {
				                color: '#cddafd',
				                fontSize: 14,
				                // width: 120,
				                // height: 20,
				                borderRadius: 5
				            },
				            padding: [30, 0],
				            itemWidth: 15,
				            itemHeight: 15,
				            itemGap: 20,
				            data: source1.legendData,
				            formatter: function(name) {
				            	// console.log(name)
				                var oa = option3.series[0].data;
				                var total = 0;
				                oa.forEach((item, index) => {
				                    total += item.value;
				                });
				                // console.log('oa',oa)
				                for (var i = 0; i < oa.length; i++) {
				                    if (name == oa[i].name) {

				                        var left =  '占'+(oa[i].value / total * 100).toFixed(2) + '%'
				                        return left+'   查看';
				                    }
				                }
				            },
				        }
				    ],
				    series: [{
				        type: 'pie',
				        radius: [!wdwth ? '36%' : '50%', !wdwth ? '53%' : '80%'],
				        center: ['24%', '50%'],
				        data: source1.source,
				        hoverAnimation: false,
				        itemStyle: {
				            normal: {
				                label: {
				                    show: false
				                },
				                borderColor: 'rgba(0,0,0,0)',
				            	borderWidth: 5
				            },
				            
				        }
				    }]
				};
				var myChartSg = echarts.init($('body #echart-sigle')[0]);// 右下
				myChartSg.setOption(option3);
				myChartSg.on('legendselectchanged', function (params) { // 点击图标的查看事件
				    // console.log(params.name);// 打印出对应的name
				});
    		}else if(domid === 6) {
    			var mockData = {
			  		total: 100, // 总数
			  		complete: 90,// 已考核单位数
			  	}
			  	var source = that.initMockData(mockData)
    			// var mockData = [{name: 'total',value:100,icon: 'rect'},{name:'complete',value: 90,icon: 'rect'}]
    			var option4 = {
				    title: {
				        text: (mockData.complete / mockData.total * 100 ).toFixed(2) + '%',
				        x: '11%',
				        y: '50%',
				        textStyle: {
				            fontWeight: 'normal',
				            color: '#fff',
				            fontSize: '25'
				        },
				        itemGap: 5,
				        subtext:' 执行考核进度',
				        // padding: 0
				    },
				    color: ['rgba(176, 212, 251, 1)'], 
				    legend: [{
				    		orient: 'vertical',
				    		left: 250,
				    		y: '50%',
				    		icon: 'rect',
				            textStyle: {
				                color: '#cddafd',
				                fontSize: 14,
				                width: 120,
				                height: 20,
				            },
				            itemWidth: 15,
				            itemHeight: 15,
				            itemGap: 20,
				            data: source,
				            formatter: function(name) {
				            	// console.log('name',name)

				            	if (name == 'total') {
				            		return mockData[name] - mockData.complete + '户/未考核单位'
				            	}else {
				            		return mockData[name] + '户/已考核单位'
				            	}
				            	
				            }
				    	}],
				    series: [{
				        type: 'pie',
				        clockWise: false,
				        center: ['20%','60%'],
				        radius: ['45%', '70%'],
				        startAngle: -270,
				        itemStyle: {
				            normal: {
				                label: {
				                    show: false
				                },
				                labelLine: {
				                    show: false
				                }
				            }
				        },
				        hoverAnimation: false,
				        data: [{
				        	name: 'complete',
				            value: mockData.complete,
				            itemStyle: {
				                normal: {
				                    color: '#00d4da',
				                    label: {
				                        show: false
				                    },
				                    labelLine: {
				                        show: false
				                    }
				                } 
				            }
				        }, {
				        	name: 'total',
				            value: mockData.total - mockData.complete,
				            itemStyle: {
				                normal: {
				                    color: '#00a1ff',
				                }
				            }
				        }]
				    }]
				} 
    			var myChartDw = echarts.init($('body #echarts-render-dw')[0])
    			myChartDw.setOption(option4);
    			// 注册select 事件
    			$('body .select').on('click', '.placeholder', function(e) {
				var parent = $(this).closest('.select');
				    if (!parent.hasClass('is-open')) {
				        parent.addClass('is-open');
				        $('.select.is-open').not(parent).removeClass('is-open');
				    } else {
				        parent.removeClass('is-open');
				    }
				    e.stopPropagation();
				}).on('click', 'ul>li', function() {
				    var parent = $(this).closest('.select');
				    parent.removeClass('is-open').find('.placeholder').text($(this).text());
				});
				 
				$('body').on('click', function() {
				    $('.select.is-open').removeClass('is-open');
				});

    		}else if(domid === 8 ) {
    			$('.slide .iconfont.icon-gengduo').on('click',function(){
					var ulleft = $(this).parent().parent().find('.leftpart')
					var ulright = $(this).parent().parent().find('.rightpart')
					console.log(ulleft)
					console.log($(this).hasClass('active'))
					if ($(this).hasClass('active')) {
						ulleft.addClass('left')
						ulright.addClass('right')
						$(this).removeClass('active')
						$(this).siblings().addClass('active')
					}
				})
				$('.slide .iconfont.icon-fanhui').on('click',function(){
					var ulleft = $(this).parent().parent().find('.leftpart')
					var ulright = $(this).parent().parent().find('.rightpart')
					console.log(ulleft)
					console.log($(this).hasClass('active'))
					if ($(this).hasClass('active')) {
						ulleft.removeClass('left')
						ulright.removeClass('right')
						$(this).removeClass('active')
						$(this).siblings().addClass('active')
					}
				})
    		}else if (domid === 10) {
    			$('.dashboard-top-entry img').on('mouseover',function(){
					var src = $(this).attr('src')
					var newsrc = src.replace('.png','-active.png')
					console.log(newsrc)
					$(this).attr('src', newsrc)
				})
				$('.dashboard-top-entry img').on('mouseleave',function(){
					var src = $(this).attr('src')
					var newsrc = src.replace('-active.png','.png')
					console.log(newsrc)
					$(this).attr('src', newsrc)
				})
    		}else if (domid === 14) {

    			var mockdataformate  = [
			  		{
			  			name: '同比增长率',
			  			time: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ],
			  			value: [393, 438, 485, 631, 689, 824, 587, 312]
			  		},
			  		{
			  			name: '同期比',
			  			value: [200, 382, 102, 267, 186, 315, 316, 124]
			  		}
			  	]
			  	var option5 = {
				    tooltip: {},
				    grid: {
				        top: '3%',
				        left: '1%',
				        right: '1%',
				        bottom: '15%',
				        containLabel: true,
				    },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: true,
				        axisLine: { //坐标轴轴线相关设置。数学上的x轴
				            show: false,
				        },
				        axisLabel: { //坐标轴刻度标签的相关设置
				            textStyle: {
				                color: '#d1e6eb',
				                margin: 10,
				                fontSize: 10
				            },
				        },
				        axisTick: {
				            show: false,
				        },
				        data: mockdataformate[0].time
				        // \n 换行
				        // 需要指定第几个字符换行激活次选项 同时删除data内的\n
				        // formatter: function(value) {
				         //        var ret = ""; //拼接加\n返回的类目项
				         //        var maxLength = 5; //每项显示文字个数
				         //        var valLength = value.length; //X轴类目项的文字个数
				         //        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
				         //        if (rowN > 1) //如果类目项的文字大于5,
				         //        {
				         //            for (var i = 0; i < rowN; i++) {
				         //                var temp = ""; //每次截取的字符串
				         //                var start = i * maxLength; //开始截取的位置
				         //                var end = start + maxLength; //结束截取的位置
				         //                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响
				         //                temp = value.substring(start, end) + "\n";
				         //                ret += temp; //凭借最终的字符串
				         //            }
				         //            return ret;
				         //        } else {
				         //            return value;
				         //        }
				         //    },
				    }],
				    yAxis: [{
				        type: 'value',
				        min: 0,
				        // max: 140,
				        // splitNumber: 10,
				        splitLine: {
				            show: true,
				            lineStyle: {
				                color: '#343434',
				                type: 'dashed',
				                width: 1.5
				            }
				        },
				        axisLine: {
				            show: false,
				        },
				        axisLabel: {
				            margin: 20,
				            textStyle: {
				                color: '#d1e6eb'
				            },
				        },
				        axisTick: {
				            show: false,
				        },
				    }],
				    legend: [{
				        show: true,
				        itemWidth: 10,
				        left: '1%',
				        bottom: '0%',
				        itemHeight: 10,
				        itemGap: 30,
				        borderRadius: 4,
				        data: [{name: '同比增长率'},{name: '同期比'}],
				        textStyle: {
				            color: '#ccc',
				            fontStyle: 'normal',
				            fontSize: 12,
				        }
				    }],
				    series: [{
				    	name: '同比增长率',
				        type: 'line',
				        // smooth: true, //是否平滑曲线显示
						symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
				        showAllSymbol: true,
				        // symbol: 'emptyCircle',
				        symbolSize: 9,
				        lineStyle: {
				            normal: {
				                color: "#3aa1ff", // 线条颜色
				            },
				        },
				        itemStyle: {
				            normal: {
				                color: "#3aa1ff",
				            }
				        },
				        data: mockdataformate[0].value
				    }, {
				    	name: '同期比',
				        type: 'bar',
				        barWidth: 20,
				        label: {
				            show: false
				        },
				        itemStyle: {
				        	emphasis: {
				        		label: {
				        			// show: false
				        		}
				        	},
				            normal: {
				            	color: '#26D968'
				            }
				        },
				        data: mockdataformate[1].value
				    }]
				};

				var option6 = {
				    tooltip: {},
				    grid: {
				        top: '3%',
				        left: '1%',
				        right: '1%',
				        bottom: '15%',
				        containLabel: true,
				    },
				    xAxis: [{
				        type: 'category',
				        boundaryGap: true,
				        axisLine: { //坐标轴轴线相关设置。数学上的x轴
				            show: false,
				        },
				        axisLabel: { //坐标轴刻度标签的相关设置
				            textStyle: {
				                color: '#d1e6eb',
				                margin: 10,
				                fontSize: 10
				            },
				        },
				        axisTick: {
				            show: false,
				        },
				        data: ['2018年\n1月', '2018年\n2月', '2018年\n3月', '2018年\n4月', '2018年\n5月', '2018年\n6月', '2018年\n7月' ]
				        // \n 换行
				        // 需要指定第几个字符换行激活次选项 同时删除data内的\n
				        // formatter: function(value) {
				         //        var ret = ""; //拼接加\n返回的类目项
				         //        var maxLength = 5; //每项显示文字个数
				         //        var valLength = value.length; //X轴类目项的文字个数
				         //        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
				         //        if (rowN > 1) //如果类目项的文字大于5,
				         //        {
				         //            for (var i = 0; i < rowN; i++) {
				         //                var temp = ""; //每次截取的字符串
				         //                var start = i * maxLength; //开始截取的位置
				         //                var end = start + maxLength; //结束截取的位置
				         //                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响
				         //                temp = value.substring(start, end) + "\n";
				         //                ret += temp; //凭借最终的字符串
				         //            }
				         //            return ret;
				         //        } else {
				         //            return value;
				         //        }
				         //    },
				    }],
				    yAxis: [{
				        type: 'value',
				        min: 0,
				        // max: 140,
				        // splitNumber: 10,
				        splitLine: {
				            show: true,
				            lineStyle: {
				                color: '#343434',
				                type: 'dashed',
				                width: 1.5
				            }
				        },
				        axisLine: {
				            show: false,
				        },
				        axisLabel: {
				            margin: 20,
				            textStyle: {
				                color: '#d1e6eb',

				            },
				        },
				        axisTick: {
				            show: false,
				        },
				    }],
				    legend: [{
				        show: true,
				        itemWidth: 10,
				        left: '1%',
				        bottom: '0%',
				        itemHeight: 10,
				        itemGap: 30,
				        // borderRadius: ,
				        data: [{name: '环比增长速度'},{name: '环比发展速度'}],
				        textStyle: {
				            color: '#ccc',
				            fontStyle: 'normal',
				            fontSize: 12,
				        }
				    }],
				    series: [{
				    	name: '环比增长速度',
				        type: 'line',
				        // smooth: true, //是否平滑曲线显示
						symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
				        showAllSymbol: true,
				        // symbol: 'emptyCircle',
				        symbolSize: 9,
				        lineStyle: {
				            normal: {
				                color: "#3aa1ff", // 线条颜色
				            },
				        },
				        itemStyle: {
				            normal: {
				                color: "#3aa1ff",
				            }
				        },
				        data: [393, 438, 485, 631, 689, 824, 587, 312]
				    }, {
				    	name: '环比发展速度',
				        type: 'bar',
				        barWidth: 20,
				        label: {
				            show: false
				        },
				        itemStyle: {
				        	emphasis: {
				        		label: {
				        			// show: false
				        		}
				        	},
				            normal: {
				            	color: '#26D968'
				            }
				        },
				        data: [200, 382, 102, 267, 186, 315, 316, 124]
				    }]
				};
				var Chartkhrs = echarts.init($('body #echarts-render-khrs')[0])
				var Chartkhrs2 = echarts.init($('body #echarts-render-khrs2')[0])
				Chartkhrs.setOption(option5);
				Chartkhrs2.setOption(option6);
    		}
    	},
	   	initData(source) { // 初始化显示的数据 处理数据的样式
		    // legendColor.map((item, index) => {
		    //     richStyle['style' + index] = {};
		    //     richStyle['style' + index]['color'] = item;
		    //     richStyle['style' + index]['align'] = 'right';
		    //     richStyle['style' + index]['cursor'] = 'pointer';
		    // });
		    if (Object.prototype.toString.call(source) === '[object Object]') {
		        var arr = [];
		        var legendData = [];
		        Object.entries(source).forEach((value) => {
		            legendData.push(value[0]);
		            var obj = {};
		            obj.name = value[0];
		            obj.value = value[1];
		            arr.push(obj);
		        });
		        // console.log(arr)
		        // console.log(richStyle)
		        source = arr;
		        return {
		            source,
		            legendData
		        };
		    } else if (source && Object.prototype.toString.call(source) === '[object Array]') {
		        var legendData = [];
		        source.forEach((item, index) => {
		            legendData.push(item.name);
		        });
		        return {
		            source,
		            legendData
		        };
		    }
		},
		initMockData:function(mock) {
			var arr = []
	  		for(var item in mock) {
	  			var h = {}
	  			h.name = item
	  			h.value = mock[item]
	  			h.icon = 'rect'
	  			arr.push(h)
	  		}
	  		return arr
	  	}
  	}
  
	exports('domConfig', config);
});    
